<div nz-row>
  <div nz-col nzSpan="8"></div>
  <div nz-col nzSpan="8">
    <div style="height: 80px;"></div>
    <nz-steps [nzCurrent]="current">
      <nz-step nzTitle=""></nz-step>
      <nz-step nzTitle=""></nz-step>
      <nz-step nzTitle=""></nz-step>
      <nz-step nzTitle=""></nz-step>
    </nz-steps>
    <ng-container *ngTemplateOutlet="stepsAction"></ng-container>
    <div class="">
      <div style="height: 20px"></div>
      <div [hidden]="checkCurrent(0)">
        <app-step1 #step1Component></app-step1>
      </div>
      <div [hidden]="checkCurrent(1)">
        <app-step2 #step2Component></app-step2>
      </div>
      <div [hidden]="checkCurrent(2)">
        <app-step3 #step3Component></app-step3>
      </div>
      <div [hidden]="checkCurrent(3)">
        <app-step4></app-step4>
      </div>
      <!--<app-my-reactive-forms></app-my-reactive-forms>-->
    </div>
    <ng-container *ngTemplateOutlet="stepsAction"></ng-container>
  </div>
  <div nz-col nzSpan="8">

  </div>
</div>
<ng-template #stepsAction>
  <div class="steps-action">
    <button nz-button nzType="default" (click)="cancel()">
      <span>Cancel</span>
    </button>
    <button nz-button nzType="default" (click)="pre()" [disabled]="current === 0">
      <span>Previous</span>
    </button>
    <button nz-button nzType="default" (click)="next()" *ngIf="current < 3">
      <span>Next</span>
    </button>
    <button nz-button nzType="primary" (click)="done()" *ngIf="current === 3">
      <span>Done</span>
    </button>
  </div>
</ng-template>
